<template>
  <scroll-view scroll-y="true" class="my-exer">

    <uni-list class="list_content ldBg">
      <view class="noData" v-if="listpage.list.length === 0">
        暂无收藏题目，快去收藏一些吧
      </view>
      <uni-list-item
        :title="myExer.questionTypeName + '     (' + myExer.questionNum + ')'"
        link
        showArrow
        clickable
        v-for="myExer in listpage.list"
        :key="myExer.id"
        @click="toExer(myExer)"
      />
    </uni-list>

    <uni-load-more
      :status="listpage.status"
      :contentText="{
        contentdown: '点击查看更多',
        contentrefresh: '加载中',
        contentnomore: '到底了',
      }"
      @clickLoadMore="query(true)"
    ></uni-load-more>
  </scroll-view>
</template>

<script lang="ts" setup>
import { reactive, ref } from "vue";
import { onLoad, onShow, onPullDownRefresh } from "@dcloudio/uni-app";
import { MyExer } from "@/ts";
import http from "@/utils/request";

// 定义变量
const queryForm = reactive({
  // 查询表单
  name: "", // 名称
});
const listpage = reactive({
  // 分页列表
  curPage: 1,
  pageSize: 10,
  total: 0,
  list: [] as MyExer[],
  status: "more",
});

// 页面加载完毕，执行如下方法
onShow(async () => {
  query(false);
});
onPullDownRefresh(async () => {
  console.log("refresh");
  query(false);
});
/**
 * 查询
 *
 * @param append 追加数据
 */
async function query(append: boolean) {
  listpage.status = "loading";
  if (append) {
    listpage.curPage++;
  } else {
    listpage.curPage = 1;
  }

  const { code, data } = await http.post("myCollect/listpage", {
    ...queryForm,
    type: 2,
    curPage: listpage.curPage,
    pageSize: listpage.pageSize,
  });

  if (code !== 200) {
    return;
  }else{
    uni.stopPullDownRefresh();
  }

  listpage.total = data.total;

  if (append) {
    if (data.list.length) {
      listpage.list.push(...data.list);
    }
  } else {
    listpage.list = data.list;
  }

  // 将列表中的examStartTime 最后两位秒去掉
  // 去掉最后两位秒

  if (listpage.list.length < listpage.total) {
    listpage.status = "more";
  } else {
    listpage.status = "no-more";
  }
}

// 去练习
async function toExer(exer: MyExer) {
  uni.navigateTo({ url: `/pages/myCollect/myCollectPag?exerId=${exer.id}` });
}
</script>

<style lang="scss" scoped>
.my-exer {
  height: 100%;
}
/* 固定高度，超出滚动*/

.list_content {
  height: calc(100vh - 100rpx);
  overflow-y: auto;
}
/* 卡片圆角 阴影效果*/
.card {
  margin: 15rpx;
  background-color: #fff;
  border-radius: 20rpx;
  box-shadow: 0 0 20rpx 0 rgba(0, 0, 0, 0.1);
}
.test_time {
  height: 60rpx;
  margin: 6rpx;
  display: flex;
  flex-direction: column;
  align-items: left;
  justify-content: center;
}
.test_card_status {
  height: 60rpx;
  margin: 6rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
</style>
<style scoped>
.uni-list-item /deep/ .uni-list-item__content-title {
  font-size: 16px;
  color: #000;
  font-weight: 500;
}
.noData {
  text-align: center;
  margin-top: 50%;
}
</style>
